<template>
  <div class="singer">
    <div class="layout-top">
      <div class="left">
        <span
            class="icon-xiangzuojiantou iconfont"
            @click="
            () => {
              router.back();
            }
          "
        />
        <span class="size">歌手分类</span>
      </div>
    </div>
    <div class="cate">
      <div class="list">
        <div
            v-for="item in areaList"
            :class="['item', areaValue == item.type ? 'active' : '']"
            @click="changeArea(item.type)"
            :key="item.id"
        >
          {{ item.name }}
        </div>
      </div>
      <div class="list">
        <div
            v-for="item in typeList"
            :class="['item', typeValue == item.type ? 'active' : '']"
            @click="changeType(item.type)"
            :key="item.id"
        >
          {{ item.name }}
        </div>
      </div>
    </div>
    <div class="singer-list">
      <div class="title">热门歌手</div>
      <div class="singer-info">
        <div class="item" v-for="item in artistsList" :key="item.id">
          <div class="left">
            <div class="img">
              <img v-lazy="item.img1v1Url" alt=""/>
            </div>
            <div class="name">
              {{ item.name }}
            </div>
          </div>
          <div class="right red">
            <span class="font">+</span>
            <span class="font">关</span>
            <span class="font">注</span>
          </div>
        </div>
        <div v-show="touchBottom" class="touch">正在加载中</div>
      </div>
    </div>
  </div>
</template>


<script setup>
// todo
//  增加下拉刷新功能，点击歌手跳到对应歌手详情页

import router from "../../router/index.js";
import {onMounted, onUnmounted, ref} from "vue";
import api from "../../utils/api.js";
// 类型列表
const typeList = [
  {type: -1, name: "全部"},
  {type: 1, name: "男"},
  {type: 2, name: "女"},
  {type: 3, name: "乐团/组队"},
];
// 地区列表
const areaList = [
  {type: -1, name: "全部"},
  {type: 7, name: "华语"},
  {type: 96, name: "欧美"},
  {type: 8, name: "日本"},
  {type: 16, name: "韩国"},
  {type: 0, name: "其他"},
];
// 类型值
const typeValue = ref(-1);
// 地区值
const areaValue = ref(-1);
// 当前页数
const pageSize = ref(0);
// 每页条数
const limit = 30;
// 歌手列表
const artistsList = ref([]);

let list;
const listTop = ref(); // 页面滚动高度
const listHeight = ref(); // 页面高度
const listChildsHeight = ref(); // 内容总高度
const childHeight = 59; // 单给 item 高度
let touchBottom = ref(false);

// 改变类型
const changeType = (type) => {
  if (!touchBottom.value) {
    touchBottom.value = true;
    typeValue.value = type;
    change();
  }
  // more
};
// 改变地区
const changeArea = (type) => {
  if (!touchBottom.value) {
    touchBottom.value = true;
    areaValue.value = type;
    change();
  }
};
// 改变类型和地区时调用的方法
const change = async () => {
  artistsList.value = [];
  list.scrollTop = '0';
  pageSize.value = 1;
  let result = await api.getSingerCategoryList({
    limit: limit,
    offset: pageSize.value * limit,
    type: typeValue.value,
    area: areaValue.value,
  });
  if (result.code === 200) {
    listChildsHeight.value = artistsList.value.length * 59;
    artistsList.value = result.artists;
    touchBottom.value = false;
  }
}

// 高度改变方法
const handleScrollY = async () => {
  listTop.value = list.scrollTop;
  if (listTop.value > listChildsHeight.value - listHeight.value - 100 && !touchBottom.value) {
    touchBottom.value = true
    pageSize.value += 1;
    let result = await api.getSingerCategoryList({
      limit: limit,
      offset: pageSize.value * limit,
      type: typeValue.value,
      area: areaValue.value,
    });
    if (result.code === 200) {
      artistsList.value = [...artistsList.value, ...result.artists];
      listChildsHeight.value = artistsList.value.length * 59;
      touchBottom.value = false;
    }
  }
  // if (listTop.value < 600) {
  //   isTrue.listTop = true;
  // }
}

onMounted(async () => {
  let result = await api.getSingerCategoryList({});
  artistsList.value = result.artists;
  list = document.querySelector('.singer-info');
  list.addEventListener("scroll", handleScrollY, true);
  // touchstart 手指按到屏幕上
  // touchmove 手指在屏幕上滑动
  listHeight.value = list.clientHeight;
  listChildsHeight.value = artistsList.value.length * childHeight;
});

onUnmounted(() => {
  // 离开该页面需要移除这个监听的事件，不然会报错
  list.removeEventListener("scroll", handleScrollY, true);
});

</script>


<style scoped lang="scss">
.singer {
  .cate {
    .list {
      display: flex;
      padding: 10px 0;

      .item {
        text-align: center;
        font-size: 13px;
        width: 60px;
        color: #333;
      }
    }
  }

  .singer-list {
    .title {
      color: #333;
      padding: 10px;
      font-size: 12px;
      background: #f4f4f4;
    }

    .singer-info {
      padding: 10px;
      height: calc(100vh - 152px);
      overflow-y: scroll;

      .item {
        padding-bottom: 15px;
        display: flex;
        justify-content: space-between;
        align-items: center;

        .left {
          display: flex;
          align-items: center;

          .img {
            img {
              width: 40px;
              border-radius: 50%;
            }
          }

          .name {
            padding-left: 10px;
            font-size: 14px;
          }
        }

        .right {
          padding: 1px 7px;
          border: 1px #df5000 solid;
          border-radius: 12px;

          .font {
            padding: 0 2px;
            font-size: 12px;
          }
        }
      }

      .touch {
        text-align: center;
        color: #1890ff;
        margin-bottom: 50px;
      }
    }
  }
}
</style>
